<template>
	<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" :title="title" :width="900">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="90px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col :span="12">
					<el-form-item class="form-item" label="上级单位:" prop="parentId">
						<el-cascader v-model="paramsForm.parentId" class="el-form-item" clearable :options="treeData" placeholder="请选择上级单位" :props="{ expandTrigger: 'click', emitPath: false, checkStrictly: true, label: 'deptName', value: 'deptId' }" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="单位名称:" prop="deptName">
						<el-input v-model="paramsForm.deptName" placeholder="请输入单位名称" maxlength="50" show-word-limit />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="单位类型:" prop="deptFlag">
						<dict-select v-model="paramsForm.deptFlag" :dictKey="'dept_flag'" placeholder="请选择单位类型" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="单位简称:" prop="shortName">
						<el-input v-model="paramsForm.shortName" placeholder="请输入单位简称" maxlength="50" show-word-limit />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="显示顺序:" prop="orderNum">
						<el-input-number v-model="paramsForm.orderNum" class="el-form-item" controls-position="right" :max="50" :min="1" placeholder="请输入显示顺序" :step-strictly="true" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="负责人:" prop="leader">
						<el-input v-model="paramsForm.leader" placeholder="请输入负责人" maxlength="20" show-word-limit />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="联系电话:" prop="phone">
						<el-input v-model="paramsForm.phone" placeholder="请输入联系电话" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="单位邮箱:" prop="email">
						<el-input v-model="paramsForm.email" placeholder="请输入单位邮箱" maxlength="50" show-word-limit />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="单位状态:" prop="status">
						<el-radio-group v-model="paramsForm.status">
							<el-radio :value="'0'">正常</el-radio>
							<el-radio :value="'1'">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script name="EditDeptModal" setup>
import global from '@/utils/global'
const emit = defineEmits(['peak-modal-ok'])
import { validate } from '@meta/utils'

/*
 *@Description: 初始化数据
 *@Author: liuYuFeng
 *@Date: 2023-02-24 16:52:40
 */
defineProps({
	treeData: {
		type: Array,
		default: () => [],
	},
})
const state = reactive({
	showModal: false,
	paramsFormRef: null,
	title: '',
	paramsForm: {
		parentId: '',
		deptName: '',
		shortName: '',
		orderNum: 1,
		leader: '',
		phone: '',
		email: '',
		status: '0',
		deptFlag: '',
	},
	paramsRules: {
		// parentId: [{ required: true, message: '请选择上级单位', trigger: 'change' }],
		deptName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
		shortName: [{ required: true, message: '请输入单位简称', trigger: 'blur' }],
		deptFlag: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
		orderNum: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }],
		phone: [
			{
				// required: true,
				validator: (rule, value, callback) => {
					if (value) {
						if (validate.verifyPhone(value)) {
							callback()
						} else {
							callback(new Error('请输入正确的手机号！'))
						}
					} else {
						callback()
					}
				},
				trigger: 'blur',
			},
		],
	},
})
const { showModal, title, paramsForm, paramsRules, paramsFormRef } = toRefs(state)

/*
 *@Description: 方法method
 *@Author: liuYuFeng
 *@Date: 2023-02-24 15:53:16
 */
const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	if (state.paramsForm.deptId) {
		//编辑
		global.$fetchPostData(`/meta-system/web/v1/sysDept/editDept`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	} else {
		global.$fetchPostData(`/meta-system/web/v1/sysDept/addDept`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 1)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async row => {
	state.showModal = true
	await nextTick()
	state.paramsForm.deptId = ''
	if (row.flag == 'update') {
		state.paramsFormRef.resetFields()
		state.title = '编辑单位'
		getDataDetail(row.deptId)
	} else if (row.flag == 'add') {
		state.title = '添加单位'
		state.paramsFormRef.resetFields()
	} else {
		state.title = '添加单位'
		state.paramsFormRef.resetFields()
		state.paramsForm.parentId = row.deptId
	}
}
const getDataDetail = deptId => {
	global.$fetchPostData(`/meta-system/web/v1/sysDept/getDeptById`, { idLong: deptId }).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data || {}
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped></style>
